import React, { Component } from 'react'
import { Text, StyleSheet, View, StatusBar, Switch } from 'react-native'

export default class Switch_StatusBar extends Component {
    constructor(){
        super()
        this.state = {
            hideStatusBar: false
        }
    }
    toggleStatusBar = () => {
        this.setState({ hideStatusBar: !this.state.hideStatusBar })
    }
  render() {
    return (
      <View style={[styles.container]}>
        <StatusBar
            hidden={this.hideStatusBar}
            backgroundColor="red" //安卓生效，iOS不生效
            barStyle={'light-content'}
        />
        <Switch
            trackColor={{ false: "#999", true: "#666" }}
            thumbColor={this.state.hideStatusBar ? "red" : "#fff"}
            value={this.state.hideStatusBar}
            onValueChange={this.toggleStatusBar}
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({
    container:{
        flex:1,
        justifyContent:'center',
        alignItems: 'center'
    }
})
